<template>
  <div>
    <div class="table-operator">
      <a-table
        bordered
        size="middle"
        :row-key="(record) => record.payment_id"
        :columns="paymentColumns"
        :data-source="paymentData"
      >
        <template slot="title">
          <a-button size="small" type="primary" icon="plus" @click="addPayment">添加打款</a-button>
          <a-divider type="vertical" />
          总金额:50000.00
          <a-divider type="vertical" />
          已付金额:15000.00
          <a-divider type="vertical" />
          尾款:35000.00
        </template>
        <template slot="sort">1</template>
        <template slot="amount" slot-scope="text">
          <a-tag color="red">{{ text }}</a-tag>
        </template>
        <template slot="paid" slot-scope="text">
          <a-tag color="red">{{ text }}</a-tag>
        </template>
        <template slot="final_payment" slot-scope="text">
          <a-tag color="red">{{ text }}</a-tag>
        </template>
<!--        <template slot="receive_account_type" slot-scope="text">-->
<!--          {{ accountOptions[text] }}-->
<!--        </template>-->
        <template slot="img" slot-scope="text">
          <a :href="text" target="_blank">
            <img :src="text" width="30" height="30">
          </a>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" style="margin-right:10px" @click="editModal(record.payment_id)">编辑</a-button>
          <a-popconfirm
            title="是否删除打款"
            ok-text="确定"
            cancel-text="取消"
          >
            <a-button type="danger" size="small">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
    <payment-log></payment-log>
    <a-divider />
    <a-modal
      centered
      v-model="addVisible"
      title="添加打款信息"
      @ok="addPayment"
    >
      <a-form-model
        ref="addForm"
        :rules="paymentRules"
        :model="paymentForm"
      >
        <a-form-model-item class="form-item" label="打款类型" prop="amount">
          <a-select>
            <a-select-option :value="1">定金</a-select-option>
            <a-select-option :value="2">尾款</a-select-option>
            <a-select-option :value="3">全款</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款金额" prop="amount">
          <a-input-number style="width: 100%;" v-model="paymentForm.amount" type="text" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款方式" prop="type">
          <a-select>
            <a-select-option :value="1">支付宝转账</a-select-option>
            <a-select-option :value="2">公司微信</a-select-option>
            <a-select-option :value="3">顾问微信</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款时间" prop="payment_time">
          <a-date-picker
            :show-time="{ format: 'HH:mm' }"
            :value="paymentForm.payment_time"
            format="YYYY-MM-DD HH:mm"
            style="width: 100%;"
            @change="onChange"
          >
          </a-date-picker>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="收款帐户" prop="receive_account_type">
          <a-select
            v-model="paymentForm.receive_account_type"
          >
            <a-select-option v-for="(item, index) in accountOpts" :key="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款账号" prop="payment_account">
          <a-input v-model="paymentForm.payment_account" type="text" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款证明" prop="img">
          <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="uploadUrl"
            :headers="headers"
            @change="handleChange"
          >
            <img v-if="paymentForm.img" :src="paymentForm.img" width="100" height="100" />
            <div v-else>
              <div class="ant-upload-text">
                上传证明
              </div>
            </div>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="非正常情况申请">
          <a-upload
            name="file"
          >
            <a-button size="small" type="primary" icon="upload">选择文件</a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="打款备注">
          <a-textarea v-model="paymentForm.remarks"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      centered
      v-model="editVisible"
      title="编辑打款信息"
    >
      <a-form-model
        ref="editForm"
        :rules="ruleForm"
        :model="paymentForm"
      >
        <a-form-model-item class="form-item" label="打款金额" prop="amount">
          <a-input-number style="width: 100%;" v-model="paymentForm.amount" placeholder="填写打款金额" type="text" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款时间" prop="payment_time">
          <a-date-picker
            :show-time="{ defaultValue: moment('00:00', 'HH:mm') }"
            :value="paymentForm.payment_time"
            format="YYYY-MM-DD HH:mm"
            style="width: 100%;"
            @change="onChange"
          >
          </a-date-picker>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="收款帐户" prop="receive_account_type">
          <a-select
            v-model="paymentForm.receive_account_type"
            placeholder="选择收款账户"
          >
            <a-select-option v-for="(item, index) in accountOpts" :key="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款账号" prop="payment_account">
          <a-input v-model="paymentForm.payment_account" type="text" placeholder="填写打款账户" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款证明" prop="img">
          <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="uploadUrl"
            :headers="headers"
            @change="handleChange"
          >
            <img v-if="paymentForm.img" :src="form.img" width="100" height="100" />
            <div v-else>
              <div class="ant-upload-text">
                上传证明
              </div>
            </div>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="打款备注" prop="remarks">
          <a-textarea v-model="paymentForm.remarks"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import moment from 'moment'
  import PaymentLog from '@/views/contract/components/PaymentLog'
  import contractColumns from '@/columns/contract'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import apis from '@/api'

  export default {
    components: {
      PaymentLog
    },
    name: 'ContractPayment',
    data () {
      return {
        paymentColumns: contractColumns.finance,
        paymentData: [
          {
            payment_id: '',
            type: '定金',
            amount: '7800',
            paid: '3000',
            final_payment: '4800',
            payment_time: '2021/5/12',
            receive_account_type: '支付宝转账',
            payment_account: '鑫彭知识产权 22585485448',
            img: ''
          }
        ],
        paymentForm: {},
        paymentRules: {},
        addVisible: false,
        headers: { 'Access-Token': storage.get(ACCESS_TOKEN) },
        uploadUrl: apis.Upload,
        accountOpts: {},
        editVisible: false,
        ruleForm: {}
      }
    },
    methods: {
      moment,
      addPayment () {
        this.addVisible = true
      },
      handleChange (info) {
        if (info.file.status === 'done') {
          this.form['img'] = info.file.response.result.url
        }
      },
      onChange () {}
    }
  }
</script>

<style scoped>

</style>
